// sass-lint:disable no-empty-rulesets
@import "../base";
@import "variables";

$range-slider-handle-size: 20px;
$range-slider-target-height: 6px;
$range-slider-bg: $gray-light;
$range-slider-marker-bg: #DDD;
$range-slider-bar-color: $blue-light;
$range-slider-handle-bg: $white;

@include block(range-slider) {
  .ais-range-slider--disabled {
    cursor: not-allowed;

    .ais-range-slider--handle {
      border-color: $range-slider-marker-bg;
      cursor: not-allowed;
    }

    .rheostat-horizontal .rheostat-progress {
      background-color: $range-slider-marker-bg;
    }
  }

  .rheostat {
    overflow: visible;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .rheostat-background {
    background-color: $range-slider-handle-bg;
    border-top: 1px solid $range-slider-marker-bg;
    border-bottom: 1px solid $range-slider-marker-bg;
    border-left: 2px solid $range-slider-marker-bg;
    border-right: 2px solid $range-slider-marker-bg;
    position: relative;
  }

  .rheostat-horizontal {
    .rheostat-background {
      height: 6px;
      top: 0;
      width: 100%;
    }

    .rheostat-progress {
      background-color: $range-slider-bar-color;
      position: absolute;
      height: 4px;
      top: 1px;
    }

    .rheostat-handle {
      margin-left: -12px;
      top: -7px;

      .ais-range-slider--tooltip {
        text-align: center;
        margin-left: -10px;
        width: 40px;
      }
    }

    .rheostat-handle {
      &::before,
      &::after {
        top: 7px;
        height: 10px;
        width: 1px;
      }

      &::before { left: 10px; }
      &::after { left: 13px; }
    }
  }

  @include element(handle) {
    width: $range-slider-handle-size;
    height: $range-slider-handle-size;
    position: relative;
    z-index: 1;
    background: $range-slider-handle-bg;
    border: 1px solid $range-slider-bar-color;
    border-radius: 50%;
    cursor: pointer;
  }

  @include element(tooltip) {
    position: absolute;
    background: $white;
    top: -$range-slider-handle-size - 2px;
    font-size: .8em;
  }

  @include element(value) {
    width: $range-slider-handle-size * 2;
    position: absolute;
    text-align: center;
    margin-left: -$range-slider-handle-size;
    padding-top: 15px;
    font-size: .8em;
  }

  @include element(marker) {
    position: absolute;
    background: $range-slider-marker-bg;
    margin-left: -1px;
    width: 1px;
    height: 5px;
  }
}
